<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker @change="getNowDate" style="width:240px" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange"
                        align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select @change="getTypeF" style="width:130px" filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select @change="CardTypeChange" style="width:130px"  placeholder="线下实体卡" v-model="formInline.channel">
                        <el-option v-for="item in cardType" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select @change="getTypeF" style="width:130px" v-model="formInline.from">
                        <el-option v-for="item in fromList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择类型" v-model="formInline.type_id" style="width:100px">
                        <el-option v-for="item in type_list" :key="item.type_id" :label="item.type_name" :value="item.type_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select style="width:130px" placeholder="选择类型" v-model="formInline.type" @change="typeChange">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select> 
                </el-form-item>
                <el-form-item>
                    <el-input style="width:130px" v-model="formInline.card_no" placeholder="请输入卡号"
                        @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input style="width:130px" v-model="formInline.mobile" placeholder="请输入手机号"
                        @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <transition name="fade" mode="out-in">
                <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small"
                    :key="formInline.type">
                    <el-table-column align="center" label='卡号' prop="card_no"></el-table-column>
                    <el-table-column align="center" label='昵称' prop="user_name"></el-table-column>
                    <el-table-column align="center" label='性别' prop="sex"></el-table-column>
                    <el-table-column align="center" label='用户联系方式' prop="mobile"></el-table-column>
                    <el-table-column align="center" label='消费时间' prop="date_create"></el-table-column>
                    <el-table-column align="center" label='消费门店' prop="store_name"></el-table-column>
                    <el-table-column align="center" label='消费区域'>
                        <template slot-scope="scope">
                            {{scope.row.area_name}} - {{scope.row.machine_id}} - {{scope.row.machine_name}}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="formInline.type==1" align="center" label="消费币数" prop="coins">
                    </el-table-column>
                    <el-table-column v-else-if="formInline.type==7" align="center" label='消费星数' prop="stars">
                    </el-table-column>
                    <el-table-column v-else align="center" label='消费次数' prop="times"></el-table-column>
                    <el-table-column align="center" label='消费类型' prop="type_id"></el-table-column>
                </el-table>
            </transition>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="20" layout="prev, pager, next, jumper"
                :total="totalDataNumber">
            </el-pagination>
            <el-button disabled class="pull-right" type="primary" size="small" @click="exportClick()" :loading="exportLoading">导出表单<count-down ref="cd"/></el-button>
            <p class="pull-right total_box">
                <span class="item" v-if="formInline.type==1">总消费币数：{{allCoins}}</span>
                <span class="item" v-else-if="formInline.type==7">总消费星数：{{allStars}}</span>
                <span class="item" v-else>总消费次数：{{allTimes}}</span>
            </p>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getPage,
        getStoreList,
        edit,
        getTypeDetail,
        getExport
    } from "@/api/member/member_consume";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                exportLoading: false,
                cardType: [{ id: 1, name: '线下实体卡'},{id: 2, name: '小程序电子卡'}],
                fromList:[{id:1,name:'普通消费'},{id:2,name:'门票相关消费'}],
                typeList: [{ id: 1, name: '游戏币' }, { id: 2, name: '10次卡' }, { id: 3, name: '20次卡' }, { id: 5, name: '季卡' }, { id: 6, name: '年卡' }, { id: 7, name: '星星卡' }, { id: 8, name: '6次卡' }, { id: 9, name: '12次卡' }, { id: 10, name: 'E舞成名卡' }, { id: 11, name: '月卡' }],
                list: null,
                listLoading: false,
                currentPage: 1,
                totalDataNumber: 1,
                storeList: null,
                brandList: [],
                type_list: [],
                formInline: {
                    type: 1,
                    begin_time: "",
                    type_id: "",
                    end_time: "",
                    mobile: "",
                    card_no: "",
                    store_id: "",
                    channel: 1,
                    from:1
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF(),
                allCoins:0,
                allStars:0,
                allTimes:0,
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            // 导出
            exportClick() {
                getExport(this.formInline)
                this.exportLoading = true;
                this.$refs.cd.countDownF(30).then(() => {
                    this.exportLoading = false;
                });
            },
            //卡选择切换
            CardTypeChange(val){
                this.formInline.type = 1;
                val === 1 ? this.typeList=[
                   //选择实体卡
                   { id: 1, name: '游戏币' }, 
                   { id: 2, name: '10次卡' }, 
                   { id: 3, name: '20次卡' }, 
                   { id: 5, name: '季卡' }, 
                   { id: 6, name: '年卡' }, 
                   { id: 7, name: '星星卡' }, 
                   { id: 8, name: '6次卡' }, 
                   { id: 9, name: '12次卡' }, 
                   { id: 10, name: 'E舞成名卡' }, 
                   { id: 11, name: '月卡' }] 
                   : 
                   this.typeList=[
                       //选择小程序电子卡
                   { id: 1, name: '游戏币' }, 
                   { id: 2, name: '10次卡' }, 
                   { id: 3, name: '20次卡' },  
                   { id: 7, name: '星星卡' }, 
                   { id: 8, name: '6次卡' }, 
                   { id: 9, name: '12次卡' }];
                this.searchClick();
            },
            typeChange() {
                this.searchClick()
            },
            // 门店列表
            getStore() {
                getStoreList({ category_id: 248 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else { 
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    } 

                    optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                        this.getTypeF();
                    });
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response.page * 20;
                    this.allCoins=response.coins;
                    this.allStars=response.stars;
                    this.allTimes=response.times;
                    getList(this.formInline).then(response => {
                        this.list = response;
                        this.listLoading = false;
                        //console.log(this.list,11)
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    this.list = response;
                    this.listLoading = false;
                });
            },
            getNowDate(val){
                this.formInline.begin_time=val[0];
                this.formInline.end_time=val[1];  
                this.getTypeF();              
            },
            getTypeF(val) {
                this.formInline.type_id=""
                let data={};
                data.begin_time=this.formInline.begin_time;
                data.end_time=this.formInline.end_time;                   
                data.store_id=this.formInline.store_id;
                data.from=this.formInline.from;
                getTypeDetail(data).then(response => {
                    response.unshift({ type_id: '', type_name: '全部类型' });
                    //console.log(response)
                    this.type_list = response;
                });
            },
        },
    };
</script>